import { Image, View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { connect } from "react-redux";
import { cartListType } from "../../models/cartlist";
import { useEffect, useState } from "react";
import { getGoodsList } from "../../api/index";
import { AtMessage } from "taro-ui";
// TODO 记得路由传参
import { ImageUrl } from "../../utils/request";
import addImage from "../../image/add4.png";
import "./index.scss";
type cardType = {
  goodsId: number;
  goodsName: string;
  goodsPicture: string;
  price: number;
  quantity: number;
  addToCart: any;
  stockId: number;
};

// 卡片
const Card = (props: cardType) => {
  return (
    <View className="GoodsCardWrapper">
      <View
        className="GooodCardItem"
        onClick={() => {
          Taro.redirectTo({
            url: "/pages/detailpage/index?id=" + props.goodsId
          });
        }}
      >
        <Image
          className="ItemImage"
          src={ImageUrl + props.goodsPicture}
        ></Image>
        <View className="ItemTextWrapper">
          <Text className="ItemText">{props.goodsName}</Text>
          <Text style={{ fontSize: 11, display: "block", margin: "3px 0" }}>
            剩余 {props.quantity}
          </Text>
          <Text style={{ fontSize: 13, color: "#f84c31", fontWeight: 700 }}>
            ￥{props.price}
          </Text>
          <Text
            style={{
              fontSize: 11,
              color: "#c6c6c6",
              textDecoration: "line-through"
            }}
          >
            ￥23.32
          </Text>
        </View>
      </View>
      <Image
        className="AddImage"
        src={addImage}
        onClick={event => {
          event.stopPropagation();
          props.addToCart({
            id: props.goodsId,
            picture: props.goodsPicture,
            title: props.goodsName,
            price: props.price,
            num: props.quantity,
            onSelect: false,
            stockId: props.stockId
          });
        }}
      ></Image>
    </View>
  );
};

type dataType = {
  categoryId: number;
  createTime: string;
  goodsId: number;
  goodsName: string;
  goodsPicture: string;
  isShow: number;
  price: number;
  quantity: number;
  stockId: number;
  updateTime: string;
};

const index = props => {
  const [data, SetData] = useState<dataType[]>();

  useEffect(() => {
    getGoodsList().then(resp => {
      SetData(resp);
    });
  }, []);

  const addToCart = (data: cartListType) => {
    props.dispatch({
      type: "cart/addCartList",
      payload: data
    });
    Taro.atMessage({
      message: "添加成功",
      type: "success"
    });
  };

  return (
    <View>
      <AtMessage />
      <View className="at-row at-row--wrap">
        {data &&
          data.map(item => {
            return (
              <View className="at-col at-col-6">
                <Card {...item} addToCart={addToCart} />
              </View>
            );
          })}
      </View>
    </View>
  );
};

export default connect(({ cart }) => ({ cart }))(index);
